<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="editormd/css/editormd.css" />
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="editormd/editormd.min.js"></script>
    <script src="editormd/plugins/image-handle-paste/image-handle-paste.js" type="text/javascript"></script>
</head>
<body>
<div style="width: 100%;height: 100px;"></div>
<div id="test-editor" style="width: auto;height: 800px">
    <textarea style="display:none;width: auto;height: 800px;">### 关于 Editor.md

**Editor.md** 是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。
    </textarea>
</div>
<div class="btns">
    <button id="goto-line-btn">Goto line 90</button>
    <button id="show-btn">Show editor</button>
    <button id="hide-btn">Hide editor</button>
    <button id="get-md-btn">Get Markdown</button>
    <button id="get-html-btn">Get HTML</button>
    <button id="watch-btn">Watch</button>
    <button id="unwatch-btn">Unwatch</button>
    <button id="preview-btn">Preview HTML (Press Shift + ESC cancel)</button>
    <button id="fullscreen-btn">Fullscreen (Press ESC cancel)</button>
    <button id="show-toolbar-btn">Show toolbar</button>
    <button id="close-toolbar-btn">Hide toolbar</button>
    <button id="toc-menu-btn">ToC Dropdown menu</button>
    <button id="toc-default-btn">ToC default</button>
</div>
<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("test-editor", {
            width  : "100%",
            height : 520,
            path   : "editormd/lib/",
            theme : "dark",
            previewTheme : "dark",
            editorTheme : "pastel-on-dark",
            // markdown : md,
            markdown : "正文",
            codeFold : true,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "http://localhost:9090/upload",
            onload : function() {
                console.log('onload', this);
                initPasteDragImg(this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });
    });
    // testEditor.imagePaste();//使用该插件

    $("#goto-line-btn").bind("click", function(){
        testEditor.gotoLine(90);
    });

    $("#show-btn").bind('click', function(){
        testEditor.show();
    });

    $("#hide-btn").bind('click', function(){
        testEditor.hide();
    });

    $("#get-md-btn").bind('click', function(){
        alert(testEditor.getMarkdown());
    });

    $("#get-html-btn").bind('click', function() {
        alert(testEditor.getHTML());
    });

    $("#watch-btn").bind('click', function() {
        testEditor.watch();
    });

    $("#unwatch-btn").bind('click', function() {
        testEditor.unwatch();
    });

    $("#preview-btn").bind('click', function() {
        testEditor.previewing();
    });

    $("#fullscreen-btn").bind('click', function() {
        testEditor.fullscreen();
    });

    $("#show-toolbar-btn").bind('click', function() {
        testEditor.showToolbar();
    });

    $("#close-toolbar-btn").bind('click', function() {
        testEditor.hideToolbar();
    });

    $("#toc-menu-btn").click(function(){
        testEditor.config({
            tocDropdown   : true,
            tocTitle      : "目录 Table of Contents",
        });
    });

    $("#toc-default-btn").click(function() {
        testEditor.config("tocDropdown", false);
    });
</script>
</body>
</html>